<template>
   <div class="goods-info">
    <div class="my-panel">
      <swipe
        class="my-swipe"
        :lunbolist="lunbolist"
      />
    </div>
    <van-panel
      class="my-panel"
      :title="goodsInfo.title"
    >
      <div class="content">
        <p class="price">
          <span class="new">现价:￥{{goodsInfo.sell_price}}</span>
          <span class="old">原价:￥{{goodsInfo.market_price}}</span>
        </p>
        <p class="number">
          购买的数量:
          <van-stepper v-model="value" />
        </p>
      </div>
    </van-panel>

    <van-panel
      class="my-panel"
      title="商品信息"
    >
      <div class="content">
        <p>商品货号:{{goodsInfo.goods_no}}</p>
        <p>库存情况:{{goodsInfo.stock_quantity}}件</p>
        <p>上架时间:{{goodsInfo.add_time | datefmt}}</p>
      </div>
    </van-panel>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :info="carts" @click="goCart"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import swipe from "../../components/swipe"
import { mapGetters } from "vuex"
export default {
  components:{
    swipe
  },
  props:['id'],
  data () {
    return {
      value: 1,
      lunbolist:[],
      goodsInfo:{}
    }
  },
  created () {
    this.getLunbo()
    this.getGoodsInfo()
  },
  methods:{
    async getLunbo () {
      const res = await this.$http.getThumImages(this.id)
      // console.log(this.id)
      this.lunbolist = res.data.message
    },
    async getGoodsInfo () {
      const res = await this.$http.getGoodsInfo(this.id)
      this.goodsInfo = res.data.message
    },
    addCart () {
      const goodsInfo = {
        id:this.id,
        src:this.lunbolist[0].src,
        completed:true,
        title:this.goodsInfo.title,
        count:this.value,
        price:this.goodsInfo.sell_price,
        timer:null
      }
      this.$store.commit('car/ADD_CART', goodsInfo)
    },
    goCart () {
      this.$router.push('/cart')
    }
  },
  computed:{
    ...mapGetters({
      carts: "car/addallcart"
    })
  }
}
</script>
<style lang="scss" scoped>
.goods-info {
  padding: 10px;
  box-sizing: border-box;
  .van-cell__title {
    font-size: 14px;
    font-weight: 600;
  }
  .my-panel {
    border: 1px solid #eee;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    .content {
      margin-left: 12px;
      font-size: 12px;
      .number {
        display: flex;
        align-items: center;
      }
      .price {
        .new {
          color: red;
          margin-right: 20px;
        }
        .old {
          text-decoration: line-through;
        }
      }
      .pay {
        margin-right: 20px;
      }
    }
  }
}
</style>
